<template>
  <div>
    <div id="slider" class="mui-sliders">
      <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll">
          <!-- 给id为0的标题添加类，属性绑定需用v-bind -->
          <a v-bind:class= '["mui-control-item",item.id===0?"mui-active":""]' 
            data-wid="tab-top-subpage-1.html"
            v-for="item in titleList" :key="item.id"
            @click="getOtherPhoto(item.id)"
            >
            {{item.title}}
          </a>
        </div>
      </div>
    </div>

    <!-- 图片列表区域 -->
     <ul>
      <li v-for="item in photoList" :key="item.id" @click="toPhotoInfo(item.id)">
        <img v-lazy="imgBaseUrl + item.img_url" >
        <div class="info">
          <h4>{{item.title}}</h4>
          {{item.zhaiyao}}
        </div>
      </li>
    </ul>
  </div>
</template>


<script>
  // 导入config.js配置文件
  import config from "../../js/globalConfig.js" 
  // 导入mui的js文件
  import mui from "../../lib/mui/js/mui.min.js"
  export default {
    data() {
      return {
        cateid: 0,
        titleList: [],
        photoList:[],
        imgBaseUrl:config.imgBaseUrl
      }
    },
    created() {
      // 获取标题
      this.getphotoTitle();
      // 获取图片列表
      this.getphotoList();
    },
    methods: {
      getphotoTitle() {
        this.$http.get("api/getimgcategory").then(res=>{
          // console.log(res.body);
          if(res.body.status === 0) {
            res.body.message.unshift({id:0,title:"全部"});
            this.titleList = res.body.message;
          }
        })
      },
      getphotoList() {
        this.$http.get("api/getimages/"+this.cateid).then(res=>{
          // console.log(res.body);
          if(res.body.status === 0) {
            this.photoList = res.body.message;
          }
        })
      },
      getOtherPhoto(id) {
        // 重新传入图片标题id获取不同类型的图片列表
        this.cateid = id;
        this.getphotoList();
      },
      // 编程式导航
      toPhotoInfo(id) {
        this.$router.push("/home/photoInfo/"+id);
      }
    },
    // 需要获取页面上元素， 需要在 mounted 事件钩子中，注册 mui 的 scroll 滚动事件
    mounted() {
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
      });
    }
  }
</script>


<style lang = "scss" scoped >
  .mui-slider {
    margin-top: 38px;
  }
  /* 解决浏览器提醒问题 */
  * { touch-action: none; }

    /* 图片样式 */
    ul {
      list-style: none;
      margin: 0;
      padding: 10px;
      li {
        margin: 10px 0;
        box-shadow: 0 0 15px #999;
        position: relative;
        img {
          width: 100%;
          display: block;
        }
        .info {
          position: absolute;
          bottom: 0;
          color: #fff;
          font-size: 12px;
          background-color: rgba(0, 0, 0, 0.4);
          max-height: 84px;
          h4 {
            font-size: 13px;
          }
        }
      }
    }
</style>